CSS clamp()

clamp()支援度:Can I Use)

CSS目前常見的數學函氏有min()、max()、calc()，以及今天要介紹的clamp()

• max() 和 min() 函數:

/* 找出value1和value2中最大值 */
max(value1, value2)

/* 找出value1和value2中最小值 */
min(value1, value2)

• calc() 函數:

calc(expression)
/* 找出value1和value2中相加值 */
calc(value1 + value2)

clamp()是什麼?

clamp(最小值, 首選值, 最大值)

• 如果想讓值設定在一個區間，可以用clamp()
  過去的寫法:

div{
  width: 30vw;
  min-width:200px;
  max-width:800px;
}

換成clamp()之後:

div{
  clamp(200px, 100%, 300px);
}

而且更棒的是字體大小也可以設定區間了，如下:

p{
  clamp(12px, 10vw, 40px);
}

Codepen範例

IT15-Day11-CSS clamp()

參考來源

• https://www.oxxostudio.tw/articles/202011/css-max-min-clamp-calc.html
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp